<template>
	<view class="pb-safe-area">
		<view class="p-4 flex flex-column grid-gap-4" v-if="form.examine!==1">
			<x-alert type="danger" :show="form.examine===3">{{form.message}}</x-alert>
			<view class="bg-white p-4 flex flex-column rounded-4 grid-gap-4">
				<view class="flex grid-gap-4 py-10">
					<view class="flex flex-column flex-center grid-gap-2 flex-1 idcard">
						<view class="idcard-image" @tap="chooseImage('front')">
							<image :src="form.front" class="idcard-image" v-if="form.front" />
							<image src="@/static/icons/idcard_1.png" class="idcard-icon" v-else />
						</view>
						<text class="h9 text-placeholder">身份证人像面</text>
					</view>
					<view class="flex flex-column flex-center grid-gap-2 flex-1 idcard">
						<view class="idcard-image" @tap="chooseImage('back')">
							<image :src="form.back" class="idcard-image" v-if="form.back" />
							<image src="@/static/icons/idcard_2.png" class="idcard-icon" v-else />
						</view>
						<text class="h9 text-placeholder">身份证国徽面</text>
					</view>
				</view>
				<view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg">
					<text class="text-danger-light-3">*</text>
					<text class="flex-1 h9 text-grey">姓名</text>
					<input type="text" class="text-right font-weight-600 h9" placeholder="请输入姓名" v-model="form.name"
						:cursor="999" :disabled="disabled">
				</view>
				<view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg">
					<text class="text-danger-light-3">*</text>
					<text class="flex-1 h9 text-grey">身份证号</text>
					<input type="idcard" class="text-right font-weight-600 h9" placeholder="请输入身份证号"
						v-model="form.idcard_number" :cursor="999" :disabled="disabled">
				</view>
				<view class="flex flex-center p-2 grid-gap-2" @tap="showMore = !showMore">
					<text class="text-placeholder h10" v-if="showMore">收起更多</text>
					<text class="text-placeholder h10" v-else>展开更多</text>
					<uni-icons :type="showMore ? 'up' : 'down'" size="12" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="flex flex-column grid-gap-4" v-if="showMore">
					<view class="flex rounded-4 p-4 flex-center grid-gap-2" @tap="handleGenderShow" hover-class="bg">
						<text class="flex-1 h9 text-grey">性别</text>
						<text class="h9 font-weight-600" v-if="form.gender"> {{ form.gender }} </text>
						<text class="h9 font-weight-600 text-placeholder" v-else> 请选择性别</text>
					</view>
					<view class="flex rounded-4 p-4 flex-center grid-gap-2" @tap="handleNationShow" hover-class="bg">
						<text class="flex-1 h9 text-grey">民族</text>
						<text class="h9 font-weight-600" v-if="form.nation"> {{ form.nation }} </text>
						<text class="h9 font-weight-600 text-placeholder" v-else> 请选择民族</text>
					</view>
					<view class="flex rounded-4 p-4 flex-center grid-gap-2" @tap="handleBirthdayShow"
						hover-class="bg">
						<text class="flex-1 h9 text-grey">出生日期</text>
						<text class="h9 font-weight-600" v-if="form.birthday"> {{ form.birthday }} </text>
						<text class="h9 font-weight-600 text-placeholder" v-else> 请选择出生日期</text>
					</view>
					<view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg">
						<text class="flex-1 h9 text-grey text-nowrap">住址</text>
						<textarea class="text-right font-weight-600 h9" placeholder="请输入住址" v-model="form.address"
							:cursor="999" auto-height  :disabled="disabled"/>
					</view>
					<view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg">
						<text class="flex-1 h9 text-grey">签发机关</text>
						<input type="text" class="text-right font-weight-600 h9" placeholder="请输入签发机关"
							v-model="form.issue" :cursor="999" :disabled="disabled">
					</view>
					<view class="flex rounded-4 p-4 flex-center grid-gap-2" @tap="handleExpireStartShow"
						hover-class="bg">
						<text class="flex-1 h9 text-grey">签发日期</text>
						<text class="h9 font-weight-600" v-if="form.expire_start"> {{ form.expire_start }} </text>
						<text class="h9 font-weight-600 text-placeholder" v-else> 请选择签发日期</text>
					</view>
					<view class="flex rounded-4 p-4 flex-center grid-gap-2"
						@tap="toggleExpireLong" hover-class="bg">
						<text class="flex-1 h9 text-grey">失效日期</text>
						<text class="h9 font-weight-600" :class="{ 'text-primary': form.expire_long }">长期有效</text>
						<uni-icons type="checkbox-filled" v-if="form.expire_long" size="20"
							color="var(--xl-primary)"></uni-icons>
						<uni-icons type="circle" v-else size="20"></uni-icons>
					</view>
					<view class="flex rounded-4 p-4 flex-center grid-gap-2" @tap="handleExpireEndShow"
						hover-class="bg" v-if="!form.expire_long">
						<text class="flex-1 h9 text-grey"></text>
						<text class="h9 font-weight-600" v-if="form.expire_end"> {{ form.expire_end }} </text>
						<text class="h9 font-weight-600 text-placeholder" v-else> 请选择失效日期</text>
					</view>
				</view>
				<view class="flex" v-if="form.examine===null||form.examine===3">
					<button class="flex-1 btn-primary btn-round" @click="submit">提交</button>
				</view>
				<view class="flex" v-if="form.examine===0">
					<button class="flex-1 btn-dark-light-7 btn-round">审核中</button>
				</view>
			</view>
			<x-picker v-model:show="genderShow" v-model="form.gender" keyName="name"
				:columns="[[{ name: '男', value: '男' }, { name: '女', value: '女' }]]"
				confirm-color="var(--xl-primary)"></x-picker>
			<x-picker v-model:show="nationShow" v-model="form.nation" keyName="name" :columns="[nationList]"
				confirm-color="var(--xl-primary)"></x-picker>
			<x-picker v-model:show="birthdayShow" v-model="form.birthday" height="50vh" mode="date"
				confirm-color="var(--xl-primary)" :maxDate="maxDate" :minDate="minDate"></x-picker>
			<x-picker v-model:show="expireStartShow" v-model="form.expire_start" height="50vh" mode="date"
				confirm-color="var(--xl-primary)" :maxDate="maxDate" :minDate="minDate"></x-picker>
			<x-picker v-model:show="expireEndShow" v-model="form.expire_end" height="50vh" mode="date"
				confirm-color="var(--xl-primary)" :maxDate="maxExpireEndDate" :minDate="minDate"></x-picker>
			<x-loading v-if="loading"></x-loading>
		</view>
		<view v-else class="p-4">
			<view class="bg-white p-4 rounded-4 py-10">
				<view class="py-10 flex flex-center flex-column">
					<uni-icons type="checkbox-filled" size="72" color="var(--xl-success)"></uni-icons>
					<text class="text-success font-weight-600">已实名认证</text>
				</view>
				<view class="h10 flex flex-column flex-center grid-gap-4">
					<text class="text-placeholder">认证信息</text>
					<text class="font-weight-600">{{form.name}}</text>
					<text class="font-weight-600">{{form.idcard_number}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, watchEffect,computed } from 'vue';
import { $api, $helper, $message } from '@/utils';
import { onLoad, } from '@dcloudio/uni-app';
import { useWebConfigStore, useRefs } from "@/stores";
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
// 姓名、性别、民、出生日期、住址、身份证号、签发机关、有效期限
const date = new Date();
const maxDate = date.getTime();
date.setFullYear(date.getFullYear() - 44);
const minDate = date.getTime();
const maxExpireEndDate = new Date();
maxExpireEndDate.setFullYear(maxExpireEndDate.getFullYear() + 20);
const form = ref({
	name: '',
	idcard_number: '',
	gender: '',
	nation: '',
	birthday: '',
	address: '',
	issue: '',
	expire_start: '',
	expire_end: '',
	expire_long: 0,
	front: '',
	back: '',
	examine:null,
	message:''
});
const disabled = computed(() => {
	return form.value.examine == 0;
});
const toggleExpireLong = () => {
	if(disabled.value) return;
	form.value.expire_long = form.value.expire_long ? 0 : 1;
}
const genderShow = ref(false);
const handleGenderShow = ()=>{
	if(disabled.value) return;
	genderShow.value = true;
}
const nationShow = ref(false);
const handleNationShow = ()=>{
	if(disabled.value) return;
	nationShow.value = true;
}
const birthdayShow = ref(false);
const handleBirthdayShow = ()=>{
	if(disabled.value) return;
	birthdayShow.value = true;
}
const expireStartShow = ref(false);
const handleExpireStartShow = ()=>{
	if(disabled.value) return;
	expireStartShow.value = true;
}
const expireEndShow = ref(false);
const handleExpireEndShow = ()=>{
	if(disabled.value) return;
	expireEndShow.value = true;
}
const showMore = ref(false);
watchEffect(() => {
	if (WEBCONFIG.value?.baidu_ocr&&form.value.examine!==0) {
		showMore.value = true;
	}
})
const loading = ref(false);
const nationList = ref([
	{ name: '汉', value: '汉' },
	{ name: '蒙古', value: '蒙古' },
	{ name: '回', value: '回' },
	{ name: '藏', value: '藏' },
	{ name: '维吾尔', value: '维吾尔' },
	{ name: '苗', value: '苗' },
	{ name: '彝', value: '彝' },
	{ name: '壮', value: '壮' },
	{ name: '布依', value: '布依' },
	{ name: '朝鲜', value: '朝鲜' },
	{ name: '满', value: '满' },
	{ name: '侗', value: '侗' },
	{ name: '瑶', value: '瑶' },
	{ name: '白', value: '白' },
	{ name: '土家', value: '土家' },
	{ name: '哈尼', value: '哈尼' },
	{ name: '哈萨克', value: '哈萨克' },
	{ name: '傣', value: '傣' },
	{ name: '黎', value: '黎' },
	{ name: '傈僳', value: '傈僳' },
	{ name: '佤', value: '佤' },
	{ name: '畲', value: '畲' },
	{ name: '高山', value: '高山' },
	{ name: '拉祜', value: '拉祜' },
	{ name: '水', value: '水' },
	{ name: '东乡', value: '东乡' },
	{ name: '纳西', value: '纳西' },
	{ name: '景颇', value: '景颇' },
	{ name: '柯尔克孜', value: '柯尔克孜' },
	{ name: '土', value: '土' },
	{ name: '达斡尔', value: '达斡尔' },
	{ name: '仫佬', value: '仫佬' },
	{ name: '羌', value: '羌' },
	{ name: '布朗', value: '布朗' },
	{ name: '撒拉', value: '撒拉' },
	{ name: '毛南', value: '毛南' },
	{ name: '仡佬', value: '仡佬' },
	{ name: '锡伯', value: '锡伯' },
	{ name: '阿昌', value: '阿昌' },
	{ name: '普米', value: '普米' },
	{ name: '塔吉克', value: '塔吉克' },
	{ name: '怒', value: '怒' },
	{ name: '乌孜别克', value: '乌孜别克' },
	{ name: '俄罗斯', value: '俄罗斯' },
	{ name: '鄂温克', value: '鄂温克' },
	{ name: '德昂', value: '德昂' },
	{ name: '保安', value: '保安' },
	{ name: '裕固', value: '裕固' },
	{ name: '京', value: '京' },
	{ name: '塔塔尔', value: '塔塔尔' },
	{ name: '独龙', value: '独龙' },
	{ name: '鄂伦春', value: '鄂伦春' },
	{ name: '赫哲', value: '赫哲' },
	{ name: '门巴', value: '门巴' },
	{ name: '珞巴', value: '珞巴' },
	{ name: '基诺', value: '基诺' }
]);
const chooseImage = (key: string) => {
	if(disabled.value) return;
	$helper.chooseImage({
		count: 1,
		success: (res: any) => {
			form.value[key] = res.tempFilePaths[0];
			loading.value = true;
			$api.Realname.upload({
				filePath: res.tempFilePaths[0],
				formData: {
					type: key
				}
			}).then((res: any) => {
				form.value[key] = res.data.url;
				if (res.data.ocr) {
					form.value = { ...form.value, ...res.data.ocr }
				}
			}).catch((err: any) => {
				$message.error(err.msg);
			}).finally(() => {
				loading.value = false;
			});
		}
	});
}
const getInfo = () => {
	loading.value = true;
	$api.Realname.info().then((data: any) => {
		form.value = data;
		if(data.examine===0){
			showMore.value = false;
		}
	}).catch((err: any) => {
	}).finally(() => {
		loading.value = false;
	});
}
const submit = () => {
	loading.value = true;
	$api.Realname.submit(form.value).then((res: any) => {
		$message.success(res.msg);
		getInfo();
	}).catch((err: any) => {
		loading.value = false;
		$message.error(err.msg);
	});
}
onLoad(() => {
	getInfo();
})
</script>

<style lang="scss" scoped>
.idcard {
	height: calc(calc(50vw - 20px) / 1.5)
}

.idcard-icon {
	width: calc(30vw - 40px);
	height: calc(calc(30vw - 40px) / 1.5)
}

.idcard-image {
	width: calc(50vw - 40px);
	height: calc(calc(50vw - 40px) / 1.5);
	background: #f5f5f5;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
